import { Button, Col, Form, Row, Select } from 'antd';
import 'antd/dist/antd.css';
import React from 'react';
import http from '../common/http';

const { Option } = Select

class TypeTransferForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            types: [{ id: 1, name: "test" }],
        }
    }

    componentDidMount() {
        this.fetchTypes()
    }

    fetchTypes = () => {
        http.get("/api/note/type/find-all")
            .then(res => {
                let types = res.data
                types = types.filter(type => type.id != this.props.typeId)
                this.setState({ types })
            })
    }

    handleSubmit = (e) => {
        e.preventDefault()
        this.props.form.validateFields()
            .then(values => {
                const obj = { fromTypeId: this.props.typeId, ...values }
                http.put("/api/note/note/transfer-notes", obj)
                    .then(res => {
                        this.props.onClose(true)
                    })
            })
            .catch(err => console.info("err"))
    }

    render() {
        // const { getFieldDecorator } = this.props.form
        return (
            <div>
                <div style={{
                    position: 'absolute',
                    left: 0,
                    bottom: 0,
                    width: '100%',
                    borderTop: '1px solid #e9e9e9',
                    padding: '10px 16px',
                    background: '#fff',
                    textAlign: 'right',
                }}>
                    <Button onClick={this.props.onClose} style={{ marginRight: 8 }}>取消</Button>
                    <Button onClick={this.handleSubmit} type="primary">提交</Button>
                </div>
                <Form form={this.props.form} layout="vertical" hideRequiredMark>
                    <Row gutter={16}>
                        <Col span={12}>
                            <Form.Item label="当前类型">
                                <h3> {this.props.typeName} </h3>
                            </Form.Item>
                            <Form.Item name="toTypeId" label="要迁移的类型" rules={[{ required: true, message: '请选择要迁移的类型' }]}>
                                <Select placeholder="请选择要迁移的类型"                                    >
                                    {this.state.types.map(type => {
                                        return (<Option key={type.id}>{type.name}</Option>)
                                    })}
                                </Select>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
            </div>
        )
    }
}

// export default TypeTransferForm
function WithNavigate(props) {
    let [form] = Form.useForm();
    return <TypeTransferForm {...props} form={form} />
}
export default WithNavigate